import React from 'react';
import { Link } from 'react-router-dom';
import Toast from 'antd-mobile/lib/toast';
import Modal from 'antd-mobile/lib/modal';
import { fetchAddresslistApi } from 'shared/api';
import { delAddressApi, editAddressApi } from './api';
import './index.less';

const alert = Modal.alert;

export default class AddressManage extends React.PureComponent {
  state = {
    addresslist: []
  }
  componentDidMount() {
    this.fetchAddresslist()
  }

  fetchAddresslist() {
    fetchAddresslistApi().then(({ code, data }) => {
      if (code === 1000) {
        this.setState({ addresslist: data })
      }
    })
  }

  handleDelAddress(addressId) {
    alert('确认是否删除', '', [
      { text: '取消', onPress: () => '', style: 'default' },
      {
        text: '确定', onPress: () => {
          delAddressApi({ address_id: addressId }).then(({ code }) => {
            if (code === 1000){
              Toast.success('删除成功', 1);
              this.fetchAddresslist()
            }
          })
        }
      },
    ]);

  }

  hanldeSetDefaultAddress = (item) => {
    const addressData = {
      ...item,
      default: 1
    }

    editAddressApi(addressData).then((res) => {
      if (res.code === 1000) {
        Toast.success('设置成功', 1);
        this.fetchAddresslist()
      }
    })
  }


  render() {
    const { addresslist } = this.state;
    return (
      <div className="account-block address-manage">
        <div className="account-block__title">
          地址管理
        </div>
        <div className="account-block__content">
          {
            addresslist.map((item, index) => {
              const { fullname, province, city, county,
                mobile, postcode, address, address_id, default: isdefault } = item;
              const area = `${province} ${city} ${county}`;
              return (
                <div key={index}>
                  <div className="address-manage-item-head">
                    <div>
                      <span>{fullname}</span>
                      {
                        isdefault ?
                          <span>默认地址</span>
                          :
                          <span className="set-addreess" onClick={() => this.hanldeSetDefaultAddress(item)}>设为默认</span>
                      }

                    </div>
                    <div onClick={() => { this.handleDelAddress(address_id) }}>删除</div>
                  </div>
                  <div className="address-manage-item-info">
                    <ul>
                      <li><span>收货人 :</span><span>{fullname}</span></li>
                      <li><span>所在地区 :</span><span>{area}</span></li>
                      <li><span>地址 :</span><span>{address}</span></li>
                      <li><span>手机 :</span><span>{mobile}</span></li>
                      <li>
                        <Link className="item-edit" to={`/addressForm/${address_id}`}>编辑</Link>
                      </li>
                    </ul>
                  </div>
                </div>
              )})
          }
        </div>
        <div className="address-manage-foot">
          {
            addresslist.length >= 10 ? '' : <Link to='/addressForm'>新增地址</Link>
          }
          <div>您已创建 <span>{addresslist.length}</span> 个收货地址，最多可创建  <span>10</span> 个</div>
        </div>
      </div>
    )
  }
}